import React from "react";
import {classnames, designComponent, designPage, PropType} from "../../src";

const AutoInheritInput = designComponent({
    inheritPropsType: {} as React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
    props: {
        type: {type: String, required: true},
    },
    emits: {
        // onChange: (val: { name: string, age: number }) => true,
    },
    setup({props}) {


        return {
            refer: {
                ...props,
                sayHello: (msg: string) => {},
            },
            render: () => {
                return (
                    <input type="text" defaultValue={props.type}/>
                )
            },
        }
    },
})

const DesignParentComponent = designComponent({
    inheritPropsType: {} as React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>,
    props: {
        mode: {type: String},
        size: {type: String as PropType<'large' | 'normal' | 'mini'>}
    },
    emits: {
        onClick: (e: MouseEvent) => true,
    },
    slots: ['default'],
    setup({props, slots, event}) {
        return {
            refer: {
                props,
                focus: (flag: boolean) => {},
            },
            render: () => (
                <button className={`${props.mode} ${props.size}`} onClick={(e) => event.emit.onClick(e.nativeEvent)}>
                    {slots.default()}
                </button>
            )
        }
    },
})

const DesignChildComponent = designComponent({
    inheritPropsType: DesignParentComponent,
    props: {
        status: {type: String},
        size: {},
    },
    slots: ['default'],
    setup({props, slots}) {
        return () => (
            <DesignParentComponent>
                <div>
                    <div>status:{props.status}</div>
                    {slots.default()}
                </div>
            </DesignParentComponent>
        )
    },
})

const CustomInheritComponent = designComponent({
    inheritPropsType: DesignParentComponent,
    inheritAttrs: false,
    props: {
        status: {type: String},
        size: {},
    },
    slots: ['default'],
    setup({props, slots, attrs}) {
        return () => (
            <div>
                <div>status:{props.status}</div>
                <DesignParentComponent {...attrs} style={{backgroundColor: '#123456', color: 'white'}}>
                    <div>
                        {slots.default()}
                    </div>
                </DesignParentComponent>
            </div>
        )
    },
})

export const DemoInheritComponent = designPage(() => {

    const changeHandlerForObject = (data: { name: string, age: number }) => {
        console.log(data.name)
        console.log(data.age)
    }
    const changeHandlerForEvent = (e: React.ChangeEvent<HTMLInputElement>) => {
        console.log(e.target.value)
    }

    return () => (
        <div>
            <h2>类型继承，以及覆盖部分类型</h2>
            <AutoInheritInput
                className={classnames(['111', '222'])}
                type={'yes'}
                placeholder={'请输入'}
                style={{border: 'solid 1px #333', outline: 'none'}}
                {...{
                    /*onChange: (data) => {
                        console.log(data.name)
                        console.log(data.age)
                    },
                    onChange: changeHandlerForObject,*/
                    onChange: changeHandlerForEvent,
                }}
            />
            <h2>design组件的属性继承与类型继承</h2>
            <DesignChildComponent mode={'c-mode'} size={'mini'} status={'wahaha'} onMouseDown={e => {
                console.log(e.nativeEvent)
            }}/>
            <h2>测试手动继承属性</h2>
            <CustomInheritComponent mode={'c-mode'} size={'mini'} status={'wahaha'} onMouseDown={e => {
                console.log(e.nativeEvent)
            }}>
                自定义内容
            </CustomInheritComponent>
        </div>
    )
})
